﻿function chonbang(evt, bang) {
    var i, x, tablinks;
    if (bang == "Practive") {
        document.getElementsByClassName("apb-detail")[0].style.display = "none";
    }
    else {
        document.getElementsByClassName("apb-detail")[0].style.display = "block";
    }
    x = document.getElementsByClassName("apb-content");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("apb-link");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-white w3-border-teal", " w3-grey w3-border-grey");
    }
    document.getElementById(bang).style.display = "block";
    evt.currentTarget.className = evt.currentTarget.className.replace(" w3-grey w3-border-grey", " w3-white w3-border-teal");
}
$(document).ready(function () {
    $("#apb-practive-slide").carousel({ interval: false });
    var apb_audio = document.getElementById("apb-audio");
    var apb_speak_btn = $("#apb-speak-btn");
    var apb_trans = document.getElementById("apb-trans");
    var apb_tutorial = document.getElementById("apb-tutorial-text");
    var apb_detail_content = document.getElementById("apb-detail-content");
    //var apb_img = document.getElementById("apb-img");
    var apb_writing_view = $(".apb-writing-view");
    var apb_svg_src = "";
    var playlist, tracks, current, first_apb, len;
    function apb_speak(apb) {
        var audio_src = $(apb).children(".apb-audio-src").html();
        var trans_src = $(apb).children(".apb-vn").html();
        //var img_src = $(apb).children(".apb-img-src").html();
        apb_svg_src = $(apb).children(".apb-img-src").html();
        $(".apb-item").removeClass("w3-light-grey");
        $(apb).addClass("w3-light-grey");
        apb_audio.src = audio_src;
        if (apb_audio.src != "") {
            if ($(apb_audio).hasClass("speaking-five")) {
                apb_speak_btn.removeClass("apb-speakable-btn").css({ "color": "#bbbaba", "cursor": "default" }).attr("title", "Bấm vào chữ để nghe phát âm");
            }
            else {
                $("#apb-speak-btn").addClass("apb-speakable-btn");
                $("#apb-speak-btn").attr("title", "Nghe phát âm");
                $(".apb-speakable-btn").css({ "color": "black", "cursor": "default" });
            }
            apb_audio.load();
            apb_audio.play();
        }
        if ($(apb_audio).hasClass("speaking-five")) {
            $(apb_detail_content).css("display", "none");
            apb_tutorial.style.display = "block";
        }
        else {
            apb_trans.innerHTML = trans_src;
            //apb_img.src = img_src;
            //apb_img.style.display = "block";
            apb_tutorial.style.display = "none";
            $(apb_detail_content).css("display", "block");
            apb_writing_view.html(apb_svg_src);
            window.signature.initialize("apb-writing-view");
            return setTimeout(function () {
                return window.signature.animate("apb-writing-view");
            }, 0);
        }
    }
    $(".apb-rewriting-btn").click(function () {
        window.signature.initialize("apb-writing-view");
        return setTimeout(function () {
            return window.signature.animate("apb-writing-view");
        }, 0);
    })
    function apb_speak_five(apb_list) {
        current = 0;
        playlist = $(apb_list);
        tracks = playlist.find(".apb-item");
        len = tracks.length;
        if (len > 0) {
            $(".apb-speak-five-btn").removeClass("w3-teal");
            $(apb_list).find(".apb-speak-five-btn").addClass("w3-teal");
            first_apb = playlist.find(".apb-item")[0];
            apb_speak(first_apb);
        }
    }

    $(".apb-item").click(function () {
        if ($(apb_audio).hasClass("speaking-five")) { }
        else {
            $(apb_audio).addClass("speaking-one");
            apb_speak(this);
            apb_audio.addEventListener("ended", apb_speak_end, false);
            $(".apb-speakable-btn").click(function () {
                $(this).css({ "color": "black", "cursor": "default" });
                apb_audio.play();
                apb_audio.addEventListener("ended", apb_speak_end, false);
            })
        }
    });

    var apb_speak_end = function () {
        $(apb_audio).removeClass("speaking-one");
        $(".apb-speakable-btn").css({ "color": "#009688", "cursor": "pointer" });
    }

    $(".apb-speak-five-btn").click(function () {
        if ($(apb_audio).hasClass("speaking-one")) { }
        else {
            $(apb_audio).addClass("speaking-five");
            $("#apb-speak-btn").removeClass("apb-speakable-btn");
            apb_speak_five(this.parentElement.parentElement);
            apb_audio.addEventListener("ended", apb_speak_five_end, false);
        }
    });

    var apb_speak_five_end = function () {
        if ($(apb_audio).hasClass("speaking-five")) {
            current++;
            if (current == len) {
                $(".apb-item").removeClass("w3-light-grey");
                $(".apb-speak-five-btn").removeClass("w3-teal");
                apb_trans.innerHTML = "";
                apb_tutorial.style.display = "block";
                //apb_img.style.display = "none";
                apb_audio.src = "";
                $(apb_audio).removeClass("speaking-five");
            }
            else {
                var next_apb = playlist.find(".apb-item")[current];
                apb_speak(next_apb);
            }
        }
    }
})
function apb_practive_start() {
    $("#apb-practive-progress").animate({ "height": "toggle" }, "fast");
}
function apb_check_sound(btn) {
    var check_sound_audio = document.getElementById("apb-check-sound-audio");
    check_sound_audio.src = $(btn).find(".apb-check-sound-src").html();
    check_sound_audio.play();
    check_sound_audio.addEventListener("ended", check_sound_done(), false);
}
function check_sound_done() {
    $(".apb-check-sound-done").show();
}
function apb_choose_answer(btn) {
    $(".apb-choose-btn").removeClass("apb-choosen w3-grey w3-text-white");
    $(btn).addClass("apb-choosen w3-grey w3-text-white");
    if ($(btn).hasClass("apb-choose-speak-btn")) {
        practive_audio.src = $(btn).find(".apb-practive-speak-src").html();
        practive_audio.play();
    }
    $(".apb-practive-check-btn").removeAttr("disabled");
}
function apb_check_answer() {
    answered += 1;
    if ($(".apb-choosen").hasClass("apb-right-answer")) {
        apb_right_answer();
        $(".apb-practive-check-btn").css("display", "none");
        $(".apb-next-question-btn").css("display", "inline-block");
    }
    else {
        apb_wrong_answer();
        $(".apb-practive-check-btn").css("display", "none");
        $(".apb-next-question-btn").css("display", "inline-block");
    }
}
function apb_next_question() {
    if (answered >= maxnumber) {
        $(".carousel-inner").css("display", "none");
        $("#apb-practive-progress").animate({ "height": "toggle" }, "fast");
        $("#apb-congratulation-text").append("<p>Bạn đã trả lời đúng " + rightnumber + "/" + maxnumber + " câu</p>");
        if (width > 80) {
            practive_audio.src = "/Content/effect/100percent.mp3";
            practive_audio.play();
            apb_star_effect(5);
            $("#apb-advice-text").append("<p>Thật tuyệt vời!</p>");
        }
        else if (width > 60) {
            practive_audio.src = "/Content/effect/80percent.mp3";
            practive_audio.play();
            apb_star_effect(4);
            $("#apb-advice-text").append("<p>Rất tốt!</p>");
        }
        else if (width > 40) {
            practive_audio.src = "/Content/effect/80percent.mp3";
            practive_audio.play();
            apb_star_effect(3);
            $("#apb-advice-text").append("<p>Khá lắm!</p>");
        }
        else if (width > 20) {
            practive_audio.src = "/Content/effect/0percent.mp3";
            practive_audio.play();
            apb_star_effect(2);
            $("#apb-advice-text").append("<p>Cố gắng thêm nữa!</p>");
        }
        else if (width > 0) {
            practive_audio.src = "/Content/effect/0percent.mp3";
            practive_audio.play();
            apb_star_effect(1);
            $("#apb-advice-text").append("<p>Luyện tập chăm chỉ nhé!</p>");
        }
        else {
            practive_audio.src = "/Content/effect/gameover.mp3";
            practive_audio.play();
            apb_star_effect(0);
            $("#apb-advice-text").append("<p>Bạn nên học lại!</p>");
        }
        $("#apb-advice-text").css("animation-delay", "0.45s");
        $(".apb-renew-btn").css("animation-delay", "0.5s");
        $("#apb-congratulation").removeClass("w3-hide").fadeIn();
    }
    else {
        $(".apb-practive-check-btn").attr("disabled", "disabled");
        $(".apb-practive-check-btn").css("display", "inline-block");
        $(".apb-next-question-btn").css("display", "none");
    }
}
function apb_star_effect(number) {
    var star = document.getElementsByClassName("apb-earned-star");
    for (var i = 0; i < number; i++) {
        $(star[i]).removeClass("w3-text-light-grey").addClass("w3-text-teal");
    }
    var delay = 0.1;
    for (var i = 0; i < star.length; i++) {
        $(star[i]).css("animation-delay", delay.toString() + "s");
        delay += 0.07;
    }
}
function apb_renew() {
    rightnumber = 0;
    document.getElementById("apb-right-answer-number").innerHTML = rightnumber;
    width = 0;
    bar.style.width = width + '%';
    answered = 0;
    $("#apb-congratulation").addClass("w3-hide");
    $("#apb-congratulation-text").html("");
    $(".apb-earned-star").removeClass("w3-text-teal").addClass("w3-text-light-grey");
    $("#apb-advice-text").html("");
    $(".apb-choose-btn").removeClass("w3-teal").removeClass("w3-red").removeClass("apb-choosen");
    $(".apb-practive-check-btn").attr("disabled", "disabled");
    $(".apb-practive-check-btn").css("display", "inline-block");
    $(".apb-next-question-btn").css("display", "none");
    $(".apb-check-sound-done").css("display", "none");
    $(".carousel-inner").css("display", "block");
    $("#apb-practive-slide").carousel(0);
    $("#apb-practive-progress").hide();
}
var bar = document.getElementById("apb-right-answer-bar");
var rightnumber = parseInt(document.getElementById("apb-right-answer-number").innerHTML);
var maxnumber = parseInt(document.getElementById("apb-max-answer-number").innerHTML);
var width = 0;
var percent = 100 / maxnumber;
var answered = 0;
var practive_audio = document.getElementById("apb-practive-audio");
function apb_right_answer() {
    width += percent;
    bar.style.width = width + '%';
    rightnumber += 1;
    $(".apb-choosen").removeClass("w3-grey").addClass("w3-teal");
    document.getElementById("apb-right-answer-number").innerHTML = rightnumber;
    practive_audio.src = "/Content/effect/correctanswer.mp3";
    practive_audio.play();
}
function apb_wrong_answer() {
    $(".apb-choosen").removeClass("w3-grey").addClass("w3-red");
    practive_audio.src = "/Content/effect/wronganswer.mp3";
    practive_audio.play();
}
/*Drawing canvas*/
context = document.getElementById("apb-drawing").getContext("2d");
$("#apb-drawing").mousedown(function (e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw();
});
$("#apb-drawing").mousemove(function (e) {
    if (paint) {
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        redraw();
    }
});
$("#apb-drawing").mouseup(function (e) {
    paint = false;
});
$("#apb-drawing").mouseleave(function (e) {
    paint = false;
});
$(".apb-redraw-btn").click(function () {
    clickX = new Array();
    clickY = new Array();
    clickDrag = new Array();
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
})
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
}
function redraw() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

    context.strokeStyle = "#00000";
    context.lineJoin = "round";
    context.lineWidth = 5;

    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.stroke();
    }
}